<template>
  <view class="children-vaccine-remind">
    <view class="header-box">

        <view class="title">儿童疫苗接种时间表</view>
        <view class="tip"
          >接种提醒按月龄计算，实际接种时间以接种站预约、医生建议为准。</view
        >
      <view class="setting-tip">设置出生日期，获取提醒，必打疫苗都不错过</view>
      <view class="setting-btn">现在设置</view>
    </view>

    <view class="main-box">
      <view class="step-item" v-for="item in childrenVaccine" :key="item.age">
        <view class="step-title">
          {{ item.age }}
        </view>
        <view
          class="setp-vaccine-item"
          v-for="vaccine in item.data"
          :key="vaccine.id"
        >
          <VaccineItem :itemData="vaccine" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { queryVaccineChildren } from "@/api";
import VaccineItem from "@/components/vaccineItem";
export default {
  name: "ChildrenVaccineRemind",
  data() {
    return {
      childrenVaccine: [],
    };
  },

  components: { VaccineItem },


  async mounted() {
    let reuslt = await queryVaccineChildren();
    this.childrenVaccine = reuslt.data;
  },
};
</script>

<style lang='scss' scoped>
.children-vaccine-remind {
  .header-box {
    padding: 40rpx;
    background: #fff;
    .title {
      font-size: 40rpx;
    }
    .tip {
      margin-top: 30rpx;
      font-size: 30rpx;
      color: #666;
      font-weight: lighter;
    }
    .setting-tip {
      margin-top: 30rpx;
      font-size: 28rpx;
      color: #f57860;
    }
    .setting-btn {
      margin-top: 20rpx;
      padding: 15rpx 40rpx;
      border: 1rpx solid #999;
      color: #999;
      display: inline-block;
    }
  }

  .main-box {
    margin-top: 40rpx;
    padding: 0 40rpx;
    position: relative;
    &::before{
      content: "";
      height: 100%;
      position: absolute;
      left: 39rpx;
      top: 10rpx;
      border-left: 1rpx dashed rgb(219, 219, 219);
    }
    .step-item {
      margin-left: 30rpx;
      margin-bottom: 30rpx;
      .step-title {
        font-size: 26rpx;
        margin-bottom: 20rpx;
        color: #666;
        position: relative;
        &::before{
          content: "";
          position:absolute;
          height: 20rpx;
          width: 20rpx;
          background: rgb(193, 193, 193);
          border-radius: 99rpx;
          left: -40rpx;
          top: 10rpx;
        }
      }
    }
  }
}
</style>